<template>
  <div>
    <el-form :inline="true" :model="Searchdata" class="demo-form-inline">
      <el-form-item label="耳号:" style="margin-left: 30px;">
        <el-input v-model="Searchdata.earNumber" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="当前电子耳号:" style="margin-left: 30px;">
        <el-input v-model="Searchdata.oldEarTag" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="新电子耳号:" style="margin-left: 30px;">
        <el-input v-model="Searchdata.newEarTag" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="MarkList()">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-form-item label="戴标原因:">
        <el-select v-model="Searchdata.reason" clearable style="width: 200px">
          <el-option v-for="item in reason" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="戴标状态:" style="margin-left: 30px;">
        <el-select v-model="Searchdata.markedCondition" clearable style="width: 200px;margin-left: 30px;">
          <el-option v-for="item in markedCondition" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-button @click="dialogVisible = true" type="danger" :icon="Plus">
      新增
    </el-button>
    <el-button type="danger" :icon="Delete" @click="Alldel">
      删除
    </el-button>
    <el-table :data="Mark" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" :index="indexMethod" label="序号" />
      <el-table-column prop="earNumber" label="耳号" align="center" />
      <el-table-column prop="oldEarTag" label="当前电子耳号" align="center" style="width: 130px;" />
      <el-table-column prop="newEarTag" label="新电子耳号" align="center" width="200"/>
      <el-table-column prop="reason" label="戴标原因" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.reason == 1">新戴</span>
          <span v-if="scope.row.reason == 2">脱落补戴</span>
          <span v-if="scope.row.reason == 3">不读补戴</span>
          <span v-if="scope.row.reason == 4">不符补戴</span>
          <span v-if="scope.row.reason == 5">解绑</span>
        </template>
      </el-table-column>
      <el-table-column prop="markedCondition" label="戴标状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.markedCondition == null">全新标</span>
          <span v-if="scope.row.markedCondition == 1">全新标</span>
          <span v-if="scope.row.markedCondition == 2">重复使用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建人" align="center" />
      <el-table-column prop="createDate" label="操作时间" align="center">
        <template v-slot="scope">
          {{ scope.row.createDate.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-link type="primary" @click="find(scope.row.id)">编辑</el-link>&nbsp;
          <el-link type="primary" @click="del(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <table style="width: 300px;margin: 5px auto;">
      <tr>
        <td>
          <el-pagination v-model:current-page="page.pindex" v-model:page-size="page.psize"
            :page-sizes="[15, 20, 30, 40]" :background="true" layout=" slot,total, sizes, prev, pager, next, jumper"
            :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            prev-text="上一页" next-text="下一页" />
        </td>
      </tr>
    </table>
    <el-dialog v-model="dialogVisible">
      <span style="margin-left: 400px;">羊只戴标-新增</span>
      <el-form ref="ruleFormRef" style="max-width: 500px" :model="form" :rules="rules" label-width="auto"
        class="demo-ruleForm" status-icon>
        <el-form-item label="耳号" prop="earNumber">
          <!-- <el-input v-model="form.earNumber"    style="width: 200px" /> -->
          <el-select v-model="form.earNumber" clearable style="width: 200px">
            <el-option v-for="item in ear" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="当前电子耳号:" prop="oldEarTag">
          <el-input v-model="form.oldEarTag" style="width: 200px" />
        </el-form-item>
        <el-form-item label="新电子耳号:" prop="newEarTag">
          <el-input v-model="form.newEarTag" style="width: 200px" />
        </el-form-item>
        <el-form-item label="戴标原因" prop="reason">
          <el-select v-model="form.reason" clearable style="width: 200px">
            <el-option v-for="item in reason" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitForm(ruleFormRef)" style="margin-left: 400px;">保存</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible1">
      <span style="margin-left: 400px;">羊只戴标-修改</span>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form1" :rules="rules" label-width="auto"
        class="demo-ruleForm" status-icon>
        <el-form-item label="耳号" prop="earNumber">
          <!-- <el-input v-model="form.earNumber"    style="width: 200px" /> -->
          <el-select v-model="form1.earNumber" clearable style="width: 200px">
            <el-option v-for="item in ear" :key="item.name" :label="item.id" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="当前电子耳号:" prop="oldEarTag">
          <el-input v-model="form1.oldEarTag" style="width: 200px" />
        </el-form-item>
        <el-form-item label="新电子耳号:" prop="newEarTag">
          <el-input v-model="form1.newEarTag" style="width: 200px" />
        </el-form-item>
        <el-form-item label="戴标原因" prop="reason">
          <el-select v-model="form1.reason" clearable style="width: 200px">
            <el-option v-for="item in reason" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitForm1(ruleFormRef)" style="margin-left: 400px;">修改</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from "element-plus"
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import config from "@/common/config";
import axios from "axios";
import http from "http";
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const ruleFormRef = ref<FormInstance>()

//序号
const indexMethod = (index: number) => {
  var count = (page.pindex - 1) * page.psize;
  for (let i = 0; i < page.pageCount; i++) {
    return index + count + 1
  }
}
const Mark = ref()
//分页
const page = reactive({
  pindex: 1,
  psize: 15,
  totalCount: 0,
  pageCount: 0,
})
//复选框
const handleSelectionChange = (val: any) => {
  refs.value = val
}
//验证
const rules = reactive<FormRules>({
  earNumber: [
    { required: true, message: '请选择电子耳号', trigger: 'blur' },
  ],
  oldEarTag: [
    { required: true, message: '当前电子耳号不能为空', trigger: 'blur' },
  ],
  newEarTag: [
    { required: true, message: '新电子耳号不能为空', trigger: 'blur' },
  ],
  reason: [
    { required: true, message: '请选择戴标原因', trigger: 'blur' },
  ],
})
//戴标表单
const form = reactive({
  "earNumber": "",
  "oldEarTag": "",
  "newEarTag": "",
  "reason": "",
  markedCondition: 1
})
//戴标表单
const form1 = reactive({
  "id": 0,
  "earNumber": "",
  "oldEarTag": "",
  "newEarTag": "",
  "reason": "",
  "markedCondition": "",
  "createBy": "",
  "createDate": "",
  "updateBy": "",
  "updateDate": ""
})
//查询条件
const Searchdata = reactive({
  earNumber: "",
  oldEarTag: "",
  newEarTag: "",
  reason: "",
  markedCondition: ""
})
const reason = ref()
const reasonlist = () => {
  axios.get("MYroute/api/MarkedCondition/GetReason").then(res => {
    reason.value = res.data;
  })
}
const handleSizeChange = (val: number) => {
  page.psize = val;
  MarkList()
}
const handleCurrentChange = (val: number) => {
  page.pindex = val;
  MarkList()
}
const markedCondition = ref()
const markedConditionlist = () => {
  axios.get("MYroute/api/MarkedCondition/GetMarkedCondition").then(res => {
    markedCondition.value = res.data;
  })
}
//羊只戴标显示
const MarkList = () => {
  axios.get("MYroute/api/MarkedCondition/GetMark", {
    params: {
      pindex: page.pindex,
      psize: page.psize,
      earNumber: Searchdata.earNumber,
      oldEarTag: Searchdata.oldEarTag,
      newEarTag: Searchdata.newEarTag,
      reason: Searchdata.reason || undefined,
      markedCondition: Searchdata.markedCondition || undefined,
    }
  }).then(res => {
    Mark.value = res.data.list;
    page.totalCount = res.data.totalCount;
    page.pageCount = res.data.pageCount;
  })
}
//删除
const del = (id: number) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      axios.delete("Mroute/api/MarkedCondition/MarkedConditionDelete?id=" + id).then(res => {
        if (res.data > 0) {
          ElMessage.success('删除成功');
          MarkList();
        }
        else {
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
//耳号
const ear = ref()
//耳号下拉框
const earlist = () => {
  axios.get("MYroute/api/MarkedCondition/MarkedGetEar").then(res => {
    ear.value = res.data;
    console.log(res.data)
  })
}
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("Mroute/api/MarkedCondition/MarkedConditionCreate", form).then(res => {
        if (res.data > 0) {
          axios.put("Mroute/api/LamBing/LamBingUpdates?card="+form.earNumber)
          ElMessage.success('添加成功');
          dialogVisible.value = false;
          MarkList();
          form.earNumber = "";
          form.oldEarTag = "";
          form.newEarTag = "";
          form.reason = "";
        }
        
        else {
          ElMessage.error('添加失败');
        }

      })
    } else {
      console.log('error submit!', fields)
    }
  })

}
//反填
const find = (id: number) => {
  dialogVisible1.value = true
  axios.get("MYroute/api/MarkedCondition/MarkedFind?id=" + id).then(res => {
    form1.id = res.data.id;
    form1.earNumber = res.data.earNumber;
    earlist();
    form1.markedCondition = res.data.markedCondition;
    form1.newEarTag = res.data.newEarTag;
    form1.oldEarTag = res.data.oldEarTag;
    form1.reason = res.data.reason;
    form1.createBy = res.data.createBy;
    form1.createDate = res.data.createDate;
    form1.updateBy = res.data.updateBy;
    form1.updateDate = res.data.updateDate;
  })
}
const refs=ref([])
const Alldel=()=>{
  var id=refs.value.map(x=>x.id)
  if(refs.value.length==0){
      ElMessage.error("至少选择一项");
      return;
  }

  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  ) 
    .then(() => {
     axios.put("Mroute/api/MarkedCondition/MarkedConditionAlldel?ids="+id).then(res=>{
        if(res.data>0){
            ElMessage.success('删除成功');
            MarkList()
        }
        else{
            ElMessage.error('删除失败');
        }
     })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
//修改
const submitForm1 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.put("Mroute/api/MarkedCondition/MarkedConditionUpdate", form1).then(res => {
        if (res.data > 0) {
          ElMessage.success('修改成功');
          dialogVisible1.value = false;
          MarkList();
          form.earNumber = "";
          form.oldEarTag = "";
          form.newEarTag = "";
          form.reason = "";
        }
        else {
          ElMessage.error('修改失败');
        }

      })
    } else {
      console.log('error submit!', fields)
    }
  })

}
onMounted(() => {
  reasonlist(),
    markedConditionlist()
  MarkList(),
    earlist()
})

</script>
<style></style>